<template>
  <div>
    <header-page></header-page>
    <!-- 热门城市 -->
    <div class="myheader">
      <div class="city">
        <dl class="dl1">
          <dt>热门城市</dt>
          <dd>北京蛋糕</dd>
          <dd>上海蛋糕</dd>
          <dd>广州蛋糕</dd>
          <dd>深圳蛋糕</dd>
          <dd>天荆蛋糕</dd>
          <dd>重庆蛋糕</dd>
          <dd>武汉蛋糕</dd>
          <dd>杭州蛋糕</dd>
          <span>共开通了<span class="span1">1000多</span>个城市蛋糕配送</span>
        </dl>

        <dl class="dl2">
          <dt>快速查找</dt>
          <dd class="dd1">
            <el-dropdown>
              <span class="el-dropdown-link">
                选择省份<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>北京</el-dropdown-item>
                <el-dropdown-item>上海</el-dropdown-item>
                <el-dropdown-item>深圳</el-dropdown-item>
                <el-dropdown-item>广东</el-dropdown-item>
                <el-dropdown-item>湖南</el-dropdown-item>
                <el-dropdown-item>湖北</el-dropdown-item>
                <el-dropdown-item>四川</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </dd>
          <dd class="dd1">
            <el-dropdown>
              <span class="el-dropdown-link">
                选择城市<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>选择城市</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </dd>
          <dd class="dd2">进入</dd>
          <dd class="dd3">
            <input type="text" placeholder=" 请输入蛋糕配送城市" />
            <span></span>
          </dd>
        </dl>
      </div>
      <!-- 按拼音首字母选择 -->
      <div class="city1">
        <dl>
          <dt>按拼音首字母选择</dt>
          <dd class="dd1">A</dd>
          <dd>B</dd>
          <dd>C</dd>
          <dd>D</dd>
          <dd>E</dd>
          <dd>F</dd>
          <dd>G</dd>
          <dd>H</dd>
          <dd>I</dd>
          <dd>J</dd>
          <dd>K</dd>
          <dd>L</dd>
          <dd>M</dd>
          <dd>N</dd>
          <dd>O</dd>
          <dd>P</dd>
          <dd>Q</dd>
          <dd>R</dd>
          <dd>S</dd>
          <dd>T</dd>
          <dd>U</dd>
          <dd>V</dd>
          <dd>W</dd>
          <dd>X</dd>
          <dd>Y</dd>
          <dd>Z</dd>
        </dl>
      </div>
      <div class="city2">
        <dl class="dl1">
          <dt>华北、东北</dt>
          <dd>北京</dd>
          <dd>天津</dd>
          <dd>石家庄</dd>
          <dd>唐山</dd>
          <dd>沧州</dd>
          <dd>保定</dd>
          <dd>廊坊</dd>
          <dd>邢台</dd>
          <dd>张家口</dd>
          <dd>秦始皇</dd>
          <dd>武安</dd>
          <dd>呼和浩特</dd>
          <dd>鄂尔多斯</dd>
          <dd>包头</dd>
          <dd>太原</dd>
          <dd>大同</dd>
          <dd>阳泉</dd>
          <dd>晋城</dd>
          <dd>沈阳</dd>
          <dd>大连</dd>
          <dd>鞍山</dd>
          <dd>本溪</dd>
          <dd>盘锦</dd>
          <dd>锦州</dd>
          <dd>抚顺</dd>
          <dd>丹东</dd>
          <dd>辽阳</dd>
          <dd>朝阳</dd>
          <dd>铁岭</dd>
          <dd>阜新</dd>
          <dd>葫芦岛</dd>
          <dd>哈尔滨</dd>
          <dd>大庆</dd>
          <dd>齐齐哈尔</dd>
          <dd>牡丹江</dd>
          <dd>佳木斯</dd>
          <dd>长春</dd>
          <dd>吉林</dd>
          <dd>延吉</dd>
        </dl>
      </div>
      <div class="city2">
        <dl class="dl1">
          <dt>华北、东北</dt>
          <dd>北京</dd>
          <dd>天津</dd>
          <dd>石家庄</dd>
          <dd>唐山</dd>
          <dd>沧州</dd>
          <dd>保定</dd>
          <dd>廊坊</dd>
          <dd>邢台</dd>
          <dd>张家口</dd>
          <dd>秦始皇</dd>
          <dd>武安</dd>
          <dd>呼和浩特</dd>
          <dd>鄂尔多斯</dd>
          <dd>包头</dd>
          <dd>太原</dd>
          <dd>大同</dd>
          <dd>阳泉</dd>
          <dd>晋城</dd>
          <dd>沈阳</dd>
          <dd>大连</dd>
          <dd>鞍山</dd>
          <dd>本溪</dd>
          <dd>盘锦</dd>
          <dd>锦州</dd>
          <dd>抚顺</dd>
          <dd>丹东</dd>
          <dd>辽阳</dd>
          <dd>朝阳</dd>
          <dd>铁岭</dd>
          <dd>阜新</dd>
          <dd>葫芦岛</dd>
          <dd>哈尔滨</dd>
          <dd>大庆</dd>
          <dd>齐齐哈尔</dd>
          <dd>牡丹江</dd>
          <dd>佳木斯</dd>
          <dd>长春</dd>
          <dd>吉林</dd>
          <dd>延吉</dd>
        </dl>
      </div>
      <div class="city2">
        <dl class="dl1">
          <dt>华北、东北</dt>
          <dd>北京</dd>
          <dd>天津</dd>
          <dd>石家庄</dd>
          <dd>唐山</dd>
          <dd>沧州</dd>
          <dd>保定</dd>
          <dd>廊坊</dd>
          <dd>邢台</dd>
          <dd>张家口</dd>
          <dd>秦始皇</dd>
          <dd>武安</dd>
          <dd>呼和浩特</dd>
          <dd>鄂尔多斯</dd>
          <dd>包头</dd>
          <dd>太原</dd>
          <dd>大同</dd>
          <dd>阳泉</dd>
          <dd>晋城</dd>
          <dd>沈阳</dd>
          <dd>大连</dd>
          <dd>鞍山</dd>
          <dd>本溪</dd>
          <dd>盘锦</dd>
          <dd>锦州</dd>
          <dd>抚顺</dd>
          <dd>丹东</dd>
          <dd>辽阳</dd>
          <dd>朝阳</dd>
          <dd>铁岭</dd>
          <dd>阜新</dd>
          <dd>葫芦岛</dd>
          <dd>哈尔滨</dd>
          <dd>大庆</dd>
          <dd>齐齐哈尔</dd>
          <dd>牡丹江</dd>
          <dd>佳木斯</dd>
          <dd>长春</dd>
          <dd>吉林</dd>
          <dd>延吉</dd>
        </dl>
      </div>
      <div class="city2">
        <dl class="dl1">
          <dt>华北、东北</dt>
          <dd>北京</dd>
          <dd>天津</dd>
          <dd>石家庄</dd>
          <dd>唐山</dd>
          <dd>沧州</dd>
          <dd>保定</dd>
          <dd>廊坊</dd>
          <dd>邢台</dd>
          <dd>张家口</dd>
          <dd>秦始皇</dd>
          <dd>武安</dd>
          <dd>呼和浩特</dd>
          <dd>鄂尔多斯</dd>
          <dd>包头</dd>
          <dd>太原</dd>
          <dd>大同</dd>
          <dd>阳泉</dd>
          <dd>晋城</dd>
          <dd>沈阳</dd>
          <dd>大连</dd>
          <dd>鞍山</dd>
          <dd>本溪</dd>
          <dd>盘锦</dd>
          <dd>锦州</dd>
          <dd>抚顺</dd>
          <dd>丹东</dd>
          <dd>辽阳</dd>
          <dd>朝阳</dd>
          <dd>铁岭</dd>
          <dd>阜新</dd>
          <dd>葫芦岛</dd>
          <dd>哈尔滨</dd>
          <dd>大庆</dd>
          <dd>齐齐哈尔</dd>
          <dd>牡丹江</dd>
          <dd>佳木斯</dd>
          <dd>长春</dd>
          <dd>吉林</dd>
          <dd>延吉</dd>
        </dl>
      </div>
    </div>

    <div class="box">
      <div class="row">
        <div class="col-md-2">
          <div class="dangaoleft1">
            <div class="pinpai">
               
              <div class="col-md-4 pp1">
                <span></span>
                <p>品牌</p>
              </div>
              <div class="col-md-4 pp2">
                  <p>元祖蛋糕</p>
                  <p>诺心蛋糕</p>
                  <p>Mcake蛋糕</p>
                  <p>米卡米奇</p>
                  <p>Vcake蛋糕</p>
                  <p>CAKEBOSS</p>
                  <p>黑池</p>
                  <p>全国蛋糕</p>
              </div>
              <div class="col-md-4 pp3">
                  <p>甘一客蛋糕</p>
                  <p>BONCAKE</p>
                  <p>窝夫小子</p>
                  <p>幸福西饼</p>
                  <p>心之和蛋糕</p>
                  <p>派悦坊</p>
                  <p>巴黎贝甜</p>
              </div>
              
            </div>
            <div class="fenlei">
                
              <div class="col-md-4 pp1">
                <span></span>
                <p>品牌</p>
              </div>
              <div class="col-md-4 pp2">
                  <p>鲜奶蛋糕</p>
                  <p>巧克力蛋糕</p>
                  <p>无糖蛋糕</p>
                  <p>米卡米奇</p>
                  <p>Vcake蛋糕</p>
                  <p>CAKEBOSS</p>
                  <p>黑池</p>
                  <p>全国蛋糕</p>
              </div>
              <div class="col-md-4 pp3">
                  <p>甘一客蛋糕</p>
                  <p>BONCAKE</p>
                  <p>窝夫小子</p>
                  <p>幸福西饼</p>
                  <p>心之和蛋糕</p>
                  <p>派悦坊</p>
                  <p>巴黎贝甜</p>
              </div>
              
            </div>
          </div>
        </div>
        <div class="col-md-10 mymd">
          <div class="dangaoright1">
            <p>元祖蛋糕<span>(可配送上海市等国内100多个城市)</span></p>
            <div class="myyzdg">
                <img src="../../assets/images/cakeimg/right1.jpg" alt="">
                <div class="myyzdg1">
                  <p>
                      元祖是2010上海世博会糕点赞助商，源自台湾，以原料上乘工艺精湛著称，是家喻户晓的精致礼品代言者。
                      </p>
                  <span>
                    元祖蛋糕可配送：上海,南京,苏州,无锡,杭州,宁波,天津,贵阳,郑州,重庆,合肥,济南,青岛,烟台,长沙,成都,武汉,大连,沈阳,福州,厦门,南昌,广州,南宁,石家庄,西安,太原,昆明,长春,温州,湖州,嘉兴,金华,丽水,衢州,绍兴,台州,舟山,镇江,盐城,扬州,常州,淮安,连云港,南通,泰州,烟台等共100多个城市。
                  </span>
                </div>
            </div>  
          </div>

          
            <ul class="dangaoright2">
                <li v-for="(item, index) in arr" :key="index">
          
            
            <img
              :src="require('../../assets/images/cakeimg/' + item.img)"
              alt=""
            />
            <span class="span1">￥{{ item.price }}</span>
            <p>{{ item.name }}</p>
            <span class="span2">{{ item.desc }}</span
            ><br />
            <div class="mybox">
              <div><span  class="on1"></span> 收藏</div><div><span class="on2"></span> 加入购物车</div>
            </div>
         
        </li>
             
            </ul>
          
        </div>
      </div>
    </div>
    <footer-page></footer-page>
  </div>
</template>

<script>
import HeaderPage from "../../components/Header/header.vue";
import footerPage from "../../components/Footer/footer.vue";
export default {
  components: {
    HeaderPage,
    footerPage,
  },
  data() {
    return {
      arr: [], 
    };
  },
  mounted() {
    this.$axios.get("../../static/data/Cake.json").then((res) => {
      console.log(res);
      this.arr = res.data.data;
      console.log(this.arr);
    });
    
  }
};
</script>

<style scoped lang='less'>
* {
  margin: 0px;
  padding: 0px;
}
.myheader {
  width: 1200px;
  height: 450px;
  margin: 0px auto;
  // background-color: fuchsia;
  border: 2px solid #fe7a24;
  .city {
    padding: 20px 10px;

    .dl1 {
      dt {
        float: left;
        margin-right: 15px;
      }
      dd {
        float: left;
        margin-right: 15px;
        color: #f36f20;
      }
      .span1 {
        color: #f36f20;
      }
    }
    .dl2 {
      margin-top: 10px;
      dt {
        float: left;
        margin-right: 15px;
      }
      dd {
        float: left;
        margin-right: 5px;
      }
      .dd1 {
        border: 1px solid #d7d7d7;
      }
      .dd2 {
        background-color: #ff7b00;
        padding: 0px 10px;
        color: white;
        font-weight: bold;
      }
      .dd3 {
        position: relative;
        input {
          margin-left: 20px;
          width: 200px;
          height: 20px;
        }
        span {
          width: 30px;
          height: 20px;
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/cakeimg/jinglingtu4.png) -333px -135px;
          position: absolute;
          right: 0px;
          top: 0;
          transform: scale(0.6);
        }
      }
    }
  }

  .city1 {
    width: 100%;
    height: 30px;
    background-color: #f4f4f4;
    padding: 0px 10px;
    float: left;
    margin-top: 15px;
    dl {
      float: left;

      dt {
        float: left;
        line-height: 30px;
        margin-right: 340px;
      }
      .dd1{
        margin-left: 200px;
      }
      dd {
        float: left;
        line-height: 30px;
        margin-right: 10px;
      }
    }
  }

  .city2 {
    padding: 20px 10px;
    margin-top: 40px;
    .dl1 {
      dt {
        float: left;
        margin-right: 15px;
        height: 50px;
      }
      dd {
        float: left;
        margin-right: 15px;
        // color: #f36f20;
      }
    }
  }
}

.box {
  width: 1200px;
  margin: 10px auto;
  .dangaoleft1 {
    width: 100%;
    height: 350px;
    // background-color: brown;
    padding: 0px 10px;
    border: 1px solid #C9C9C9;
  .pinpai {
    // background-color: burlywood;
    width: 100%;
    height: 175px;
    border-bottom: 1px solid #D9D9D9;
    padding: 2px 0px;
    .pp1 {
      span {
          margin-top: 50px;
        width: 30px;
        height: 30px;
        background-color: chartreuse;
        display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/cakeimg/jinglingtu4.png) -244px -155px;
      }
      p{
          color: #FF6A00;
      }
    }
    .pp2{
        font-size: 10px;
        color: #737373;
        margin-top: 10px;
    }
    .pp3{
        font-size: 10px;
        color: #737373;
    }
  }
  .fenlei {
    // background-color: burlywood;
    width: 100%;
    height: 150px;
    // border-bottom: 1px solid #D9D9D9;
    padding: 2px 0px;
    .pp1 {
      span {
          margin-top: 70px;
        width: 30px;
        height: 30px;
        background-color: chartreuse;
        display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/cakeimg/jinglingtu4.png) -82px -240px;
      }
      p{
          color: #FF6A00;
      }
    }
    .pp2{
        font-size: 10px;
        color: #737373;
        // margin-top: 10px;
    }
    .pp3{
        font-size: 10px;
        color: #737373;
    }
  }
   }
   .mymd{
       padding-left: 20px;
   .dangaoright1{
       height: 120px;
       width: 100%;
       background-color: #FDEFF0;
       padding: 10px;
       .myyzdg{
           width: 100%;
           height: 100px;
      img{
        width: 100px;
      }
      .myyzdg1{
        // display: inline-block;
        float: right;
        width:850px;
        height: 90px;
        // background-color: chartreuse;
        padding: 5px 5px;
        span{
          color: #FF6A00;
        }
      }
       }  
   }
   .dangaoright2{
     padding-right: 100px;
     li{
       width:200px ;
       height: 300px;
       float: left;
       margin: 20px;
       list-style: none;
       img{
         width: 200px;
         height: 200px;
       }
       .span1{
         color: #FF6A00;
         font-weight: bold;
       }
       .span2{
         color: #FF6A00;
         font-size: 10px;
       }
       p{
           overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
       }
     }
     .mybox{
       text-align: center;
       div{
         width:100px;
         float: left;
         border: 1px solid #D9D9D9;
       }
      
     }
     .on1{
        width: 15px;
        height: 15px;
        display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/cakeimg/myimg1.png) -1px 0px;
     }
      .on2{
        width: 15px;
        height: 15px;
        display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/cakeimg/myimg2.png) -1px 0px;
     }
   }
   }
}
</style>
